<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form layui-col-space5 layui-card-header">
                    <div class="layui-inline layui-show-block">
                        <input id="search" type="text" name="name" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline layui-show-block">
                        <button class="layui-btn" id="demoReload" type="button"><i class="layui-icon">&#xe615;</i>
                        </button>
                    </div>
                </form>

                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table" lay-data="{url:'/student/getStudentList'}" lay-filter="test">
                        <thead>
                        <tr>
                            <th lay-data="{field: 'sno', title: '学号', width:200, sort: true}">学号</th>
                            <th lay-data="{field: 'name', title: '姓名', width:200}">姓名</th>
                            <th lay-data="{field: 'sex', title: '性别', width:100}">性别</th>
                            <th lay-data="{field: 'phone', title: '手机号', width:200}">手机号</th>
                            <th lay-data="{field: 'gradeName', title: '学院', width: 250}">学院</th>
                            <th lay-data="{field: 'clazzName', title: '班级', width: 200}">班级</th>
                            <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "/student/remove?id=" + data.sno,
                        type: "GET",
                        dataType: 'json',
                        success: function (result) {
                            const {code, msg} = result
                            if (code === 200) {
                                layer.msg("成功");
                                layer.close(index);
                                window.location.reload()
                            } else {
                                layer.msg(msg);
                                layer.close(index);
                            }
                        },
                    });
                });
            } else{
                layer.alert('');
            }
        });


        $('#demoReload').on('click', function(){
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    pageNum: 1,
                    pageSize: 10,
                    keyword: $('#search').val()
                }
            });
        });
    });
</script>
</html>
